@charset "utf-8";
@import "reset";
@import "common";

.seatWeb{
    width: 100%;
    height: 100%;
    background: url(../img/back.png) no-repeat center center/cover;
    position: relative;
    overflow: hidden;    
    h1{
        margin: r(25) auto 0;
        font-size: r(32);
        color: #E7C598;
        text-align: center;
        span{
            min-width: r(80);
            display: inline-block;
            padding-bottom: r(3);
            border-bottom: 1px solid #E7C598;
        }
    }
    .seatList{
        width: 100%;
        overflow: hidden;
        overflow: auto;
        position: absolute;
        top: r(85);
        bottom: r(100);
        
        .center{
            text-align: center;
            border-radius: 50%;
            background: #E7C598;
            color: #BF0C21;
            position: relative;
            box-shadow: 2px 2px 5px black;
        }
        
        .small{
            background: #e7c598;
            border-radius: 50%;
            position: absolute;
            overflow: hidden;
            box-shadow: 2px 2px 1px black;
            z-index: 99;
            img{
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }
        .host{
            width: 100%;
            text-align: center;
            margin: r(70) 0 0;
            .center{
                width: r(120);
                height: r(120);
                margin:0 auto;
                line-height: r(120);
                font-size: r(25);
                .small {
                    width: r(50);
                    height: r(50);
                }
                .Hone{
                    top:r(-60);
                    left: 50%;
                    transform: translateX(-50%);
                }
                .Htwo{
                    top:r(-8);
                    right: r(-50);
                }
                .Hthree{
                    bottom:r(-8);
                    right: r(-50);
                }
                .Hfour{
                    bottom: r(-60);
                    left: 50%;
                    transform: translateX(-50%);
                }
                .Hfive{
                    bottom:r(-8);
                    left:r(-50);
                }
                .Hsix{
                    top:r(-8);
                    left:r(-50);
                }
            }
        }
        .guest{
            width: 50%;
            margin-top: r(105);
            float: left;
            .center{
                width: r(85);
                height: r(85);
                line-height: r(85);
                margin: 0 auto;
                font-size: r(20);
            }
            .small{
                width: r(35);
                height: r(35);
            }
            .Gone{
                top:r(-43);
                left: 50%;
                transform: translateX(-50%);
            }
            .Gtwo{
                top:r(-8);
                right: r(-35);
            }
            .Gthree{
                bottom:r(-8);
                right: r(-35);
            }
            .Gfour{
                bottom: r(-43);
                left: 50%;
                transform: translateX(-50%);
            }
            .Gfive{
                bottom:r(-8);
                left:r(-35);
            }
            .Gsix{
                top:r(-8);
                left:r(-35);
            }
        }
        .add{
            p{
                font-size: r(100);
            }
        }
    }
    .share,.number,.sitDown{
        line-height: r(45);
        font-size: r(24);
        color: #E7C598;
        text-align: center;
        position: absolute;
        left: 50%;
        transform: translate(-50%);
    }
    .share{
        width: r(320);
        background: url(../img/listBtn.png) no-repeat center center/cover;
        bottom: r(40);
    }
    .number{
        width: 100%;
        display: none;
        bottom: r(65);
        span{
            display: inline-block;
            width: r(30);
            padding-bottom: r(3);
            border-bottom: 1px solid #E4B990;
        }
    }
    .sitDown{
        width: 100%;
        display: none;
        bottom: r(150);
        span{
            display: inline-block;
            min-width: r(30);
//          padding-bottom: r(1);
//          border-bottom: 1px solid #E4B990;
            color: white;
        }
    }
    //返回
    .back a{
        width: r(40);
        height: r(40);
        border-radius: 50%;
        position: absolute;
        bottom: r(25);
        right: r(56);
        overflow: hidden;
        img{
            height: 100%;
            @include abCenter;
        }
    }
    .shade,.welcome,.welcome2,.blessing{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.5);
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        z-index: 999;
        .text{
            width: r(414);
            height: r(250);
            margin: 0 auto;
            background: #e7c598;
            @include abCenter;
            border-radius: r(10);
            text-align: center;
            padding: r(80) 0;
            box-sizing: border-box;
            .close{
                width: r(40);
                height: r(40);
                position: absolute;
                right: r(15);
                top:r(10);
                img{
                    width: 100%;
                }
            }
            p{
                color: #bf0c21;
                font-size: r(28);
                line-height: 1.5;
            }
        }
    }
    
    .welcome,.welcome2{
        display: block;
        .text{
             padding-top: r(10);
             h1{
                color: #BF0C21;
                font-size: r(24);
                span{
                    min-width: r(80);
                    display: inline-block;
                    padding-bottom: r(3);
                    border-bottom: 1px solid #BF0C21;
                }
                margin-top:10px;
            }
            >div:not(:first-of-type){
                width: r(245);
                line-height: r(36);
                color: #E7C598;
                background: #BF0C21;
                margin: r(15) auto;
                font-size: r(20);
                border-radius: r(12);
                padding: r(3) 0;
            }
        }
    }
    .welcome2{
        display: none;
    }
    .blessing{
        display: none;
        .text{
            padding-top: r(105);
        }
    }
}
